<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body>
<script src="demo_data/DragObject.js"></script>
<script src="demo_data/DropTarget.js"></script>
<script src="demo_data/dragMaster.js"></script>
<script src="demo_data/helpers.js"></script>
<style>
.uponMe { background-color: red; }
</style>

<div id="dragObjects">
<img src="demo_data/piki.gif" id="piki">
<img style="" src="demo_data/bubi.gif" id="bubi">
<img style="" src="demo_data/trefi.gif" id="trefi">
<img style="" src="demo_data/chervi.gif" id="chervi">
</div>
<img class="" src="demo_data/trash.gif" style="margin-left: 100px;" id="trash">

<script>
onload = function() {
    var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        new DragObject(dragObjects[i])
    }
    
    new DropTarget(document.getElementById('trash'))
    
}
</script>

    
</body></html>